<!--
 * @Date: 2023-02-24 15:37:06
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-04-09 15:58:06
 * @FilePath: \A19\frontend\src\components\Class\LivePanel.vue
-->
import { courses } from '../../shared/types/courses';
<!--
 * @Date: 2023-02-24 15:37:06
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-03-15 19:15:06
 * @FilePath: \A19\frontend\src\components\Class\LivePanel.vue
-->
<template>
  <h1 id="title" class="ver">{{ courseInfo.name || "Live" }}</h1>
  <div class="container">
    <div class="host" >
      <div class="videoCon">
        <slot name="video"></slot>
      </div>

      <!-- <div class="controls ver">
        <slot name="controls"></slot>
      </div> -->
    </div>
    <WorldLoader v-if="mod3D"></WorldLoader>
    <div class="controls" :class="{ 'ver':!mod3D }" :style="{backgroundColor:mod3D?'rgba(255,255,255,0.4)':'white',}">
        <slot name="controls"></slot>
      </div>
    <div class="students" :style="{
      backgroundColor:mod3D?'rgba(255,255,255,0.4)':'white',
    }">
      <Communite :mod3D="mod3D"  :students="students" :wsClient="wsClient" :courseId="courseId"/>
    </div>
  </div>
  <div class="teacher-info">
    <div class="protrait">
      <el-image :src="conf.server + currentUser.portrait" fit="cover" />
    </div>
    <div class="info">{{ currentUser.name }}</div>
    <div class="icon">
      <el-icon @click="selfAudioOn.audio = !selfAudioOn.audio" v-if="selfAudioOn.audio"><Microphone style="cursor: pointer;" /></el-icon>
      <el-icon @click="selfAudioOn.audio = !selfAudioOn.audio" v-else><Mute style="cursor: pointer;" /></el-icon>
    </div>
    <div class="canvas">
      <!-- <img src="/mic.png" alt="" class="bac"> -->
      <canvas ref="canvasRef" height="70" width="190"></canvas>
    </div>
  </div>
</template>

<script lang="ts" setup>import { courses } from '@/shared/types/courses';
import { users } from '@/shared/types/user';
import { Ref, inject, ref, toRefs, watch, onUnmounted, onMounted } from 'vue';
import { conf } from "@/utils/conf";
import { useClientStore } from "../../pinia/stores/client";
import { ServiceType } from '../../shared/protocols/serviceProto';
import { WsClient } from 'tsrpc-browser';
import { reject } from 'lodash';
import { usePreload } from 'lingo3d-vue';
import { createStreamSourceNode } from '../../utils/frequencyDataFromStream';
import mitt from '@/mitt';

const currentUser = useClientStore().currentUser;
const props = defineProps<{
    courseInfo:courses
    students:Array<{
      student: users;
      status: "online" | "offline";
    }>
    wsClient:WsClient<ServiceType>
    courseId:string
    //自己的audio
    cameraStream:MediaStream | undefined
    selfAudioOn:{
      audio:boolean
    }
}>()
const {courseInfo,selfAudioOn,cameraStream} = toRefs(props)
const mod3D = inject<Ref<boolean>>('mod3D') 

let sourceNode:any = undefined
const canvasRef = ref<HTMLCanvasElement>()
watch(cameraStream,newStream =>{
  if(sourceNode){
    sourceNode.destorySourse()
    sourceNode = undefined
  }

  if(newStream){
    sourceNode = createStreamSourceNode(newStream,canvasRef.value as HTMLCanvasElement)
  }

})
// watch(() => selfAudioOn.value.audio,async (newValue)=>{
//   console.log('selfAudioOn',newValue);
//   if(sourceNode){
//     sourceNode.destorySourse()
//     sourceNode = undefined
//   }
//   console.log(cameraStream.value);
//   if(newValue && cameraStream.value){
//     sourceNode = createStreamSourceNode(cameraStream.value,canvasRef.value as HTMLCanvasElement)
//   }
// })

onMounted(() =>{
  mitt.on('retransaudio',() =>{
    console.log('retransaudio');
    if(sourceNode){
      sourceNode.destorySourse()
      sourceNode = undefined
    }
    if(cameraStream.value){
      sourceNode = createStreamSourceNode(cameraStream.value,canvasRef.value as HTMLCanvasElement)
    }
  })
})
onUnmounted(() =>{
  if(sourceNode){
    sourceNode.destorySourse()
    sourceNode = undefined
  }

  mitt.off('retransaudio')
})

</script>

<style lang="less" scoped>
#title {
    text-align: left;
    background-color: antiquewhite;
    margin: 0;
    line-height: 60px;
    width:100%;
    height: 60px;
    min-width: 992px;
    font-size: 20px;
    font-weight: bold;
    padding: 0 30px;
    background-color: white;
}
.container {
  padding: 0;
  position: relative;
//   width: 100vw;
  height: calc(100% - 60px);
  display: flex;
  // background-color: aqua;
  .host {
    height: 100%;
    /* flex: 12; */
    width: 80%;
    // display: flex;
    flex-direction: column;
    min-width: 692px;
    position: absolute;
    left: 0;

    .videoCon {
        background-color: black;
        position: relative;
        height: calc(100% - 40px);
        min-height: 390px;
      .video {
        width: 100%;
        aspect-ratio: 16 / 9;
        // background-color: black;

        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }

  }
  .students {
    user-select: none;
    height: 100%;
    position: relative;
    height: 100%;
    position: relative;
    width: 20%;
    min-width: 300px;
    position: absolute;
    right: 0;
    
  }
  .controls {
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    // background-color: white;
    width: 80%;
    position: absolute;
    bottom: 0;
  }
}
.teacher-info {
  position: fixed;
  height: 70px;
  width: 190px;
  background-color: aliceblue;
  top: 75px;
  left: 45px;
  display: flex;
  border-radius: 35px;
  overflow: hidden;
  user-select: none;
  .protrait {
    position: relative;
    z-index: 1;
    height: 100%;
    aspect-ratio: 1 / 1;
    background-color: antiquewhite;
    position: relative;
    border: 2px solid white;
    border-radius: 35px;
    overflow: hidden;
    .el-image {
      height: 100%;
      width: 100%;
    }
  }
  .info {
    position: relative;
    z-index: 1;
    height: 100%;
    line-height: 70px;
    text-align: center;
    width: 75px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .icon{
    position: relative;
    z-index: 1;
    height: 70px;
    width:40px;
    transform: translateY(2px);
    // background-color: antiquewhite;
    line-height: 70px;
    text-align: center;
    font-size: 22px;
  }
  .canvas{
    position: absolute;
    height: 70px;
    width:190px;
    // background-color: green;
    z-index: 0;
    // .mic{
    // }
  }
}
</style>

